<template>
  <el-row @keyup.13="login"
          class="login-bg"
          type="flex"
          justify="center"
          align="middle"
          v-auto-height>
    <div class="login_box">
      <div class="login_title"
           v-html="text_container"></div>
      <!-- 手机登录 -->
      <div class="login_input02">
        <p class="phone_title">短信登录</p>
        <p class="phone_title01">
          <p class="phone_title01">&nbsp;</p>
          <el-form class="form"
                   ref="form"
                   :model="form"
                   label-width="0px">
            <mk-form-item prop="username"
                          mk-label="手机号码"
                          required>
              <el-input class="mm"
                        placeholder="请输入手机号"
                        v-model="form.username">
                <i slot="prefix"
                   class="el-icon-erp-yonghuming"></i>
              </el-input>
            </mk-form-item>
            <mk-form-item prop="code"
                          mk-label="图形验证码"
                          required>
              <el-col :span="12">
                <el-input class="mm"
                          placeholder="图形验证码"
                          v-model="form.code" />
              </el-col>
              <el-col :span="12">
                <span class="yzm_span"><img v-cursor
                       :src="ui.code_src"
                       @click="change_code"
                       ref="codeImg" /></span>
              </el-col>
            </mk-form-item>
            <mk-form-item prop="comobileCode"
                          mk-label="短信验证码"
                          required>
              <el-col :span="12">
                <el-input class="yzm"
                          placeholder="短信验证码"
                          v-model="form.comobileCode" />
              </el-col>
              <el-col :span="12">
                <mk-timer-btn @callback="getValidCode"
                              @countfinish="countFinish"
                              :disabled="ui.validCodeLoading"></mk-timer-btn>
              </el-col>

            </mk-form-item>
          </el-form>
          <el-button :loading="ui.loging"
                     type="primary"
                     class="denglu"
                     @click="login">立即登录</el-button>
          <p class="tabnormal"
             @click="normal_login">账号密码登录</p>
      </div>
    </div>
  </el-row>
</template>
<script>
import loginBase from './login-base'

export default {
  mixins: [loginBase],
  data () {
    return {
      text_container: '登录客来啦账号',
      form: {
        username: null,
        comobileCode: null,
        code: null
      },
      ui: {
        loging: false, // 登录
        submitLoading: false, // 注册LOGDING
        code_src: '',
        formLabelWidth: '150px',
        isCharge: false,
        validCodeLoading: false
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      let fn = this.$refs.form.validate
      let nodejs = false
      this.validate = this.$promise({ fn, nodejs })
    })
  },
  methods: {
    normal_login () {
      this.$router.replace('/login')
    },
    countFinish () {
      this.ui.validCodeLoading = false
    },
    async getValidCode () {
      if (
        !this.form.code ||
        this.form.code.length !== 4 ||
        (!this.form.username || !this.$pattern.phone.test(this.form.username))
      ) {
        this.$refs.form.validateField('username')
        this.$refs.form.validateField('code')
        return
      }
      let valiState = await this.$get('/validateImgCode.json', {
        codeImg: this.form.code
      })
      if (valiState.result) {
        let code = await this.$get('/validateCodeLogin.sms', {
          phone: this.form.username
        })
        if (code.status !== '201005') {
          this.ui.validCodeLoading = true
        }
      }
    },
    async validForm () {
      return await this.validate()
    },
    async getUser () {
      let valiState = await this.$get('/validateImgCode.json', {
        codeImg: this.form.code
      })
      if (valiState.result) {
        return await this.$post('login_code.json', {
          username: this.form.username,
          code: this.form.comobileCode
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.login-bg {
  background: url(~assets/images/loginbg.png) no-repeat;
  background-size: 100% 100%;
  .login_box {
    width: 396px;
    height: auto;
    background: #fff;
    box-shadow: 0px 1px 15px 10px #eee;
    border-radius: 4px;
    background-size: 100% 100%;
    padding-bottom: 20px;
    .login_title {
      height: 60px;
      line-height: 60px;
      font-size: 20px;
      color: rgba(146, 158, 170, 1);
      text-align: center;
      background: rgba(245, 248, 248, 1);
      margin-bottom: 17px;
    }
    .el-button {
      width: 100%;
      margin-top: 17px;
    }
    .login_input02 {
      width: 245px;
      margin: 0 auto;
      .phone_title {
        width: 100%;
        font-size: 14px;
        font-weight: bold;
        color: rgba(146, 158, 170, 1);
        margin: 0px;
      }
      .phone_title01 {
        width: 100%;
        font-size: 12px;
        color: rgba(146, 158, 170, 1);
        margin: 0px;
        position: relative;
        line-height: 26px;
      }
      .el-form {
        .mk-form-item {
          /deep/ .el-form-item__content {
            position: relative;
            .login_icon {
              position: absolute;
              bottom: -2%;
              left: 5px;
              z-index: 9;
              color: rgba(146, 158, 170, 1);
            }
            .el-input {
              .el-input__inner {
                padding-left: 31px;
              }
            }
            .yzm {
              width: 50%;
            }
            .yzm_span {
              img {
                width: 100%;
                height: 100%;
              }
            }
            /deep/.el-form-item__error {
              top: 102%;
            }
          }
          &:nth-child(2) {
            /deep/ .el-form-item__content {
              .el-input {
                float: left;
                width: 50%;
                line-height: 31px;
                margin-top: 13px;
                .el-input__inner {
                  margin-top: 0px;
                  padding-left: 10px;
                }
              }
              span {
                float: left;
                width: 47%;
                height: 35px;
                margin-left: 6px;
                margin-top: 13px;
              }
            }
          }
          &:nth-child(3) {
            /deep/ .el-form-item__content {
              .el-input {
                width: 50%;
                float: left;
                line-height: 32px;
                margin-top: 0.9rem;
                .el-input__inner {
                  margin-top: 0px;
                  padding-left: 10px;
                }
              }
              .active_phone {
                color: #929eaa;
                border: 1px solid #929eaa;
              }
              button:disabled {
                background: rgba(6, 6, 6, 0.1);
              }
              button {
                float: left;
                margin-top: 0.9rem;
                margin-left: 6px;
                width: 47%;
                height: 35px;
                text-align: center;
                line-height: 32px;
                border: 1px solid #00a3ef;
                border-radius: 5px;
                color: #00a3ef;
                background: #fff;
                cursor: pointer;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
      .el-button {
        width: 100%;
        margin-top: 17px;
      }
      .tabnormal {
        width: 100%;
        height: 36px;
        line-height: 36px;
        text-align: center;
        background: url(~assets/images/line.png) no-repeat;
        background-size: 100% 100%;
        font-size: 16px;
        color: rgba(146, 158, 170, 1);
        margin: 0px;
        margin-top: 10px;
        cursor: pointer;
      }
    }
  }
}
</style>

